<template>
	<!-- <div>
		<el-button slot="append" icon="icon-tuichu" @click="handleLogout"></el-button>
	</div> -->
	
		<div>
		<div class="header-nav home_margin" data-v-9a867d3b="" style="">
			<div class="logo"><img src="img/menhu/logo.png" alt=""></div>
			<div class="right-menu">
				<div class="content-view">
				<div class="shop-view" @click="toindex()">
					<p>{{this.Application}}</p>
				</div>
				<!-- <div class="shop-view">
					<p>上架组件</p>
				</div>
				<div class="shop-view">
					<p>申报解决方案</p>
				</div>	 -->			
			</div>
				<div v-if="this.isdisabled">
					<button class="el-button btn" aria-disabled="false" type="button"
						style="border-radius:5px;background-color: #fe7000;" @click="handleLogout()">
						<span class="">登录</span>
					</button><button class="el-button btn" aria-disabled="false" type="button"
						style="border-radius:5px;" @click="register()">
						<span class="">注册</span>
					</button>
				</div>
				<el-dropdown v-if="this.isdisabled2">
				  <span class="el-dropdown-link user-name">
				    {{this.F_Account}}
				    <i class="fa fa-caret-down user-name-down"></i>
				  </span>
				  <!-- <img class="top-bar__img" alt="" onerror="javascript:this.src='/img/headPic.png'"/> -->
				  <el-dropdown-menu slot="dropdown">
					  <el-dropdown-item @click.native="logout" divided style="z-index: 99999;">{{$t('navbar.logOut')}}</el-dropdown-item>
				    <!-- <el-dropdown-item>
				      <router-link to="/">{{$t('navbar.dashboard')}}</router-link>
				    </el-dropdown-item>
				    <el-dropdown-item>
				      <router-link to="/info/index">{{$t('navbar.userinfo')}}</router-link>
				    </el-dropdown-item>
				     <el-dropdown-item>
				      <router-link to="/info/setting">{{$t('navbar.setting')}}</router-link>
						  </el-dropdown-item>
				                <el-dropdown-item @click.native="dialogVisible = true"
				                      divided>{{$t('navbar.about')}}</el-dropdown-item> -->
				   
				  </el-dropdown-menu>
				</el-dropdown>
			</div>
			<div class="el-overlay modalClass" style="z-index: 2001; display: none;">
				<div aria-modal="true" aria-labelledby="el-id-3990-0" aria-describedby="el-id-3990-1"
					class="el-drawer rtl" role="dialog" style="width: 30%;"><span class="el-drawer__sr-focus"
						tabindex="-1"></span>
				</div>
			</div>
		</div>

		<!--轮播图 -->
		<!-- 创建外部展示容器 -->
		<div class="banner-container" style="position: relative;">
			<!-- 创建图片储存容器 -->
			<div class="banner-img-container">
				<img src="img/menhu/banner.png" alt="">
				<img src="img/menhu/banner2.png" alt="">
				<!-- <img src="img/menhu/banner.png" alt=""> -->
			</div>
		</div>


		<div class="main-contain">
			<!--排序 -->
			<div class="sort">
				<div class="active sort-item">
					<div class="zq-drop-list">
						<span>
							<li @click="MRPX($event)">默认排序</li>
						</span>
					</div>
				</div>
				<div class="sort-item">
					<div class="zq-drop-list" @mouseover="onDplOver($event)" @mouseout="onDplOut($event)">
						<span>
							<li>上架时间</li>
						</span>
						<ul v-dpl>
							<li @click="SJSX($event)">升序</li>
							<li @click="SJJX($event)">降序</li>
						</ul>
					</div>
				</div>
				<div class="sort-item">
					<div class="zq-drop-list" @mouseover="onDplOver($event)" @mouseout="onDplOut($event)">
						<span>
							<li>价格</li>
						</span>
						<ul v-dpl>
							<li @click="JGSX($event)">升序</li>
							<li @click="JGJX($event)">降序</li>
						</ul>
					</div>
				</div>
				<!--搜索框 -->
				<el-input placeholder="请输入关键字" v-model="searchParam" style="inputStyle" clearable @clear="clearClick">
					<el-button slot="append" icon="el-icon-search" @click="searchClick"
						style="background-color: #fe7000; color:white;border-radius: 8px;">搜索</el-button>
				</el-input>
			</div>
			<!--能力组件 -->
			<div class="production" data-v-a8611a29="">

				<ul class="list-inline">

					<li v-for="(item, index) in items" :key="index">

						<div class="product-wrap shop-item" data-v-504eaa33="" data-v-a8611a29="">

							<div class="product-image" data-v-504eaa33="">
								<div class="el-image" data-v-504eaa33=""
									style="height: 85px; width: 85px;margin-top: 20px;"> 
									<img :src="item.F_Icon" class="el-image__inner" style="object-fit: fill;">

								</div>
								<div class="component-type" data-v-504eaa33="">
									{{ item.F_Type }}
								</div>
							</div>
							<div class="product-middle" data-v-504eaa33="">
								<div class="home__name" data-v-504eaa33="">
									{{ item.F_Name }}
									<span class="el-tag el-tag--light" data-v-504eaa33=""
										style="margin-left: 12px; background: rgb(85, 184, 74); color: rgb(255, 255, 255);">
										<span class="el-tag__content">
											{{item.F_Free}}
										</span>
									</span>
									<span class="el-tag el-tag--light" data-v-504eaa33=""
										style="margin-left: 12px; background: rgb(85, 184, 74); color: rgb(255, 255, 255);">
										<span class="el-tag__content">
											外链
										</span>
									</span>
								</div>
								<div class="home__details" data-v-504eaa33="">
									<div class="home__description" data-v-504eaa33="">
										{{item.F_BriefIntroduction}}
									</div>
								</div>
							</div>
							<!-- <div class="tags" data-v-504eaa33="">
	   				<div class="tag" data-v-504eaa33="">
	   					技术组件
	   				</div>
	   				<div class="tag" data-v-504eaa33="">
	   					产品应用
	   				</div>
	   			</div> -->
				             <div class="button" data-v-504eaa33="" style="margin-left: 130%;float: right;">
								<el-button class="el-button2"  type="button"
									data-v-504eaa33="" @click="view(item)">
									<span class="">
										查看详情>>>
									</span>
								</el-button>
							 </div>
							
							

						</div>
					</li>
				</ul>

			</div>

			<div class="page-box">
				<el-pagination :current-page="currentPage" :page-size="pageSize" :total="pageCount"
					@current-change="handlePageChange"></el-pagination>
			</div>
		</div>

	</div>

</template>

<script>
	import {
		getIndexPages,
		changeIndexSetting,
		getIndexDefaultConf
	} from '@/api/organization/user'
	import {
		mapGetters
	} from "vuex";
	import {
		baseUrl
	} from "@/config/env";
	import { resetRouter } from "@/router/router";
	export default {
		directives: {
			dpl: {
				bind(el) {
					el.style.display = "none";
				}
			}
		},
		data() {
			return {
				isdisabled:true,
				isdisabled2:false,
				items: [],
				currentPage: 1,
				pageSize: 9,
				pageCount: 0,
				orderfield: "F_Name",
				order: "asc",
				searchParam: '',
				imageUrl:[],
				F_Account:'',
				F_UserType:'',
				Application:'',
				// keyValue:'',

			}
		},
		// created() {
		//     this.getListData();
		//   },
		mounted() {
			this.getListData();
			const storedObject = localStorage.getItem('avue-userInfo');
			const parsedObject = JSON.parse(storedObject);
			this.F_Account = parsedObject.content.F_Account;
			this.F_UserType = parsedObject.content.F_UserType;
			if(this.F_Account){
				this.isdisabled = false;
				this.isdisabled2 = true;
			}
			
			localStorage.setItem('F_Account', this.F_Account);
			localStorage.setItem('F_UserType', this.F_UserType);
			console.log(this.F_UserType)
			if(this.F_UserType == 0){
				this.Application = "买家中心"
			}
			if(this.F_UserType == 1){
				this.Application = "卖家中心"
			}
		},

		methods: {
			logout() {
			  this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
			    confirmButtonText: this.$t("submitText"),
			    cancelButtonText: this.$t("cancelText"),
			    type: "warning",
			  }).then(() => {
			    this.$store.dispatch("LogOut").then(() => {
			      resetRouter();
			      this.$store.commit("SET_SYSTEMID", "0");
			      this.$store.commit("SET_INDEX_URL", "");
				  location.reload();  
			      // this.$router.push({ path: "/menhu" });
			    });
			  });
			},
			handleLogout() {
				this.$router.push({
					path: "/login"
				});
				// const routeData = this.$router.resolve({ path: '/login'});
				//     window.open(routeData.href, '_blank');
				localStorage.setItem('menhu', 1)
			},
			toindex(){
				const routeData = this.$router.resolve({ path: '/wel/index'});
				    window.open(routeData.href, '_blank');
			},
			register() {
				// this.$router.push({
				// 	path: "/none"
				// });
				// this.$router.push({
				// 	path: "/ZhuCe"
				// });
				const routeData = this.$router.resolve({ path: '/ZhuCe'});
				    window.open(routeData.href, '_blank');
			},
			view(value) {
				const routeData = this.$router.resolve({ path: '/XiangQing',query:{F_Id:value.F_Id} });
				    window.open(routeData.href, '_blank');
				// this.$router.push({
				// 	path: "/XiangQing"
				// });
			},
			getListData() {

				// let params = this.changeSearchParams();
				axios({
						url: baseUrl + '/barinfunctionalsubassembly/portalSearch',
						method: 'get',
						params: {
							limit: this.currentPage,
							size: this.pageSize,
							orderfield: this.orderfield,
							order: this.order,
							keyword: this.searchParam
						},
					}).then(res => {
						// this.users = res.data.data.Rows;
						//this.name = res.data.data.Rows.fname;
						this.items = [];
						for (let i = 0; i < res.data.data.Rows.length; i++) {
							this.items.push({
								F_Type: res.data.data.Rows[i].F_Type,
								F_Name: res.data.data.Rows[i].F_Name,
								F_Free: res.data.data.Rows[i].F_Free,
								F_Id: res.data.data.Rows[i].F_Id,
								F_BriefIntroduction: res.data.data.Rows[i].F_BriefIntroduction,
								F_Icon: baseUrl + res.data. data.Rows[i].F_Icon,
								
							})
							
							
						}
						// console.log(this.items.F_Icon)
						// console.log(this.imageUrl)
						// console.log(this.imageUrl)
						this.pageCount = res.data.data.Total;
					})
					.catch(error => {
						console.error('数据异常!', error);
					});
			},
			handlePageChange(page) {
				this.currentPage = page;
				this.getListData();
			},
			onDplOver(event) {
				let ul = event.currentTarget.childNodes[1];
				ul.style.display = "block";

			},
			onDplOut(event) {
				let ul = event.currentTarget.childNodes[1];
				ul.style.display = "none";
			},
			SJSX(event) {
				this.orderfield = "F_SaleDate";
				this.order = "asc";
				this.getListData();
			},
			SJJX(event) {
				this.orderfield = "F_SaleDate";
				this.order = "desc";
				this.getListData();
			},
			JGSX(event) {
				this.orderfield = "F_BottomPrice";
				this.order = "asc";
				this.getListData();
			},
			JGJX(event) {
				this.orderfield = "F_BottomPrice";
				this.order = "desc";
				this.getListData();
			},
			MRPX(event) {
				this.orderfield = "F_Name";
				this.order = "asc";
				this.getListData();
			},
			/* 查询 */
			searchClick(params) {
				// this.page.currentPage=1;
				// this.searchParam.limit = 1;
				// this.searchParam.size = this.pageSize;
				// this.searchParam = params;
				params.keyword = this.searchParam;
				this.getListData()
			},
			clearClick(event) {
				this.getListData();
			}
			// fetchUsers() {
			//       axios.get('http://192.168.110.179:2828//barinfunctionalsubassembly/portalSearch')
			//         .then(res => {
			//           // this.users = res.data.data.Rows;
			// 		  //this.name = res.data.data.Rows.fname;
			// 		  for(let i = 0; i<res.data.data.Rows.length;i++){
			// 			  this.items.push({
			// 			  F_Type:res.data.data.Rows[i].F_Type,
			// 			  F_Name:res.data.data.Rows[i].F_Name,
			// 			  F_Free:res.data.data.Rows[i].F_Free,
			// 			  F_BriefIntroduction:res.data.data.Rows[i].F_BriefIntroduction
			// 			  })
			// 			  params: {
			// 			  page: this.currentPage,
			// 			  size: this.pageSize,
			// 			},
			// 		  }
			//         })
			//         .catch(error => {
			//           console.error('数据异常!', error);
			//         });
			//     }
		}
	};
</script>
<style>
	.header-nav {
		height: 60px;
		width: 100%;
		z-index: 1001;
		overflow: hidden;
		display: flex;
		align-items: center;
		color: #fff;
		position: fixed;
		top: 0;
	}

	.header-nav:before {
		content: ".";
		display: block;
		clear: both;
		height: 0;
		font-size: 0;
		visibility: hidden;
		overflow: hidden;
	}

	.header-nav .logo {
		padding-left: 13px;
		line-height: 60px;
		font-size: 22px;
		display: flex;
		justify-content: center;
		align-items: center;
		float: left;
	}

	.header-nav .logo img {
		width: 224px;
		height: 40px;
		margin-left: 112px;
		cursor: pointer;
	}

	.header-nav .right-menu {
		right: 30px;
		position: absolute;
		display: flex;
		align-items: center;
		z-index: 9;
	}

	.header-nav .right-menu .content-view {
		margin-right: 10px;
		display: flex;
		align-items: center;
	}

	.header-nav .right-menu .content-view .shop-view {
		margin-right: 20px;
		cursor: pointer;
		display: flex;
		align-items: center;
		transition: color .2s;
	}

	.header-nav .right-menu .content-view .shop-view img {
		width: 16px;
		height: 16px;
	}

	.header-nav .right-menu .content-view .shop-view p {
		margin-left: 6px;
	}

	.el-badge__content.is-fixed {
		position: absolute;
		top: 0;
		right: calc(1px + var(--el-badge-size) / 2);
		transform: translateY(-50%) translate(100%);
		z-index: var(--el-index-normal);
	}

	.el-badge__content--danger {
		background-color: var(--el-color-danger);
	}

	.el-badge__content {
		background-color: var(--el-badge-bg-color);
		border-radius: var(--el-badge-radius);
		color: var(--el-color-white);
		display: inline-flex;
		justify-content: center;
		align-items: center;
		font-size: var(--el-badge-font-size);
		height: var(--el-badge-size);
		padding: 0 var(--el-badge-padding);
		white-space: nowrap;
		border: 1px solid var(--el-bg-color);
	}

	.header-nav .right-menu .btn {
		margin: 0 20px;
		color: #fff;
		border: 1px solid #fff;
		padding: 5px 17px;
		background-color: transparent;
	}




	.header-nav .right-menu .btn:nth-of-type(2n) {
		background-color: #0055ff;
	}

	/* 轮播图 */
	html,
	body,
	div,
	span,
	applet,
	object,
	iframe,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	blockquote,
	pre,
	a,
	abbr,
	acronym,
	address,
	big,
	cite,
	code,
	del,
	dfn,
	em,
	img,
	ins,
	kbd,
	q,
	s,
	samp,
	small,
	strike,
	strong,
	sub,
	sup,
	tt,
	var,
	b,
	u,
	i,
	center,
	dl,
	dt,
	dd,
	ol,
	ul,
	li,
	fieldset,
	form,
	label,
	legend,
	table,
	caption,
	tbody,
	tfoot,
	thead,
	tr,
	th,
	td,
	article,
	aside,
	canvas,
	details,
	embed,
	figure,
	figcaption,
	footer,
	header,
	hgroup,
	menu,
	nav,
	output,
	ruby,
	section,
	summary,
	time,
	mark,
	audio,
	video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

	/* HTML5 display-role reset for older browsers */
	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	menu,
	nav,
	section {
		display: block;
	}

	body {
		line-height: 1;
	}

	ol,
	ul {
		list-style: none;
	}

	blockquote,
	q {
		quotes: none;
	}

	blockquote:before,
	blockquote:after,
	q:before,
	q:after {
		content: '';
		content: none;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	/* 自动轮播样式 */
	.banner-container {
		width: 100%;
		height: 500px;
		/* 轮播图居中 */
		margin: 1rem auto;
		margin-top: 0px;
		/* 隐藏超出展示容器的内容 */
		overflow: hidden;
		position: relative;
	}

	.banner-container .banner-img-container {
		width: 200%;
		height: 500px;
		overflow: hidden;
		position: absolute;
		/* 开启弹性盒，让图片横向排列 */
		display: flex;
		/* animation，@keyframes 搭配使用  run为自定义名称，10s时间*/
		animation: run 8s ease infinite;
	}

	.banner-container .banner-img-container img {
		width: 100%;
		height: 100%;
	}

	/* 动画关键帧 */
	/* 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。 */
	@keyframes run {
		0% {
			/* margin-left: 0; */
			transform: translateX(0);
		}

		100% {
			/* margin-left: -3600px; */
			transform: translateX(-50%);
		}
	}

	/*能力组件*/
	.main-contain {
		width: 1280px;
		margin: 0 auto;
		height: 100%;
		overflow: hidden;
	}

	.left-content {
		width: 1024px;
	}

	.goods-wrap {
		margin-bottom: 12px;
	}

	.goods {
		display: flex;
		align-items: center;
		border-bottom: 1px dashed #eee;
		text-indent: 2em;
		background-color: #fff;
	}

	.goods.colony {
		background-color: #fe70001a
	}

	.title {
		width: 120px;
		min-height: 30px;
		line-height: 30px;
		font-size: 12px;
		color: #333
	}

	.goods .type-list {
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		text-indent: 0
	}

	.type-slot {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 1;
		padding-right: 80px
	}

	.goods .type-list .type {
		margin: 15px 7px;
		padding: 5px 6px;
		border-radius: 3px;
		color: #039;
		cursor: pointer;
		font-size: 12px
	}

	li::marker {
		content: ' ';
	}

	.sort {
		height: 50px;
		background: #fff;
		margin: 20px 0 10px;
		padding: 0 20px;
		box-shadow: 0 4px 14px #0000000d;
		border-radius: 25px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		position: relative;
		/* z-index: 9999; */
	}

	.sort .sort-item {
		opacity: .6;
		font-family: PingFangSC-Regular;
		font-size: 12px;
		color: #333;
		margin-right: 30px;
		cursor: pointer;
		display: flex;
	}

	.sort .sort-item.active {
		color: #2468f2;
	}

	.production {
		margin-top: 24px;
		background-color: #f6f8fb;
		min-height: 650px;
		position: relative;
	}

	.product-wrap {
		display: grid;
		grid-template-columns: auto auto auto;
		grid-gap: 10px;
		width: 100%;
		min-height: 240px;
		padding: 16px;
		background: #fff;
		position: relative;
		float: left;
		transition: box-shadow .5s;
		box-shadow: 0 2px 14px #00000014;
		border-radius: 2px;
		box-sizing: border-box;
	}

	.production .shop-item {
		margin: 0 24px 24px 0;
	}

	.product-image {
		grid-row-start: 1;
		grid-row-end: 4;
	}

	.el-image {
		position: relative;
		display: inline-block;
		overflow: hidden;
	}

	.product-image .component-type {
		text-align: center;
		line-height: 25px;
		background: rgba(0, 97, 255, .1);
		color: #1964fc;
		margin-top: 10px;
		font-size: 14px;
		width: 85px;
	}

	.product-middle,
	.tags {
		grid-column-start: 2;
		grid-column-end: 4;
	}

	.home__name {
		padding: 14px 0 16px;
	}

	.el-tag {
		--el-tag-bg-color: var(--el-color-primary-light-9);
		--el-tag-border-color: var(--el-color-primary-light-8);
		--el-tag-hover-color: var(--el-color-primary);
		--el-tag-text-color: var(--el-color-primary);
		background-color: var(--el-tag-bg-color);
		border-color: var(--el-tag-border-color);
		color: var(--el-tag-text-color);
		display: inline-flex;
		justify-content: center;
		align-items: center;
		height: 24px;
		padding: 0 9px;
		font-size: var(--el-tag-font-size);
		line-height: 1;
		border-width: 1px;
		border-style: solid;
		border-radius: var(--el-tag-border-radius);
		box-sizing: border-box;
		white-space: nowrap;
		--el-icon-size: 14px;
	}

	.el-tag {
		--el-tag-font-size: 12px;
		--el-tag-border-radius: 4px;
		--el-tag-border-radius-rounded: 9999px;
	}

	.home__details {
		width: 100%;
	}

	.home__details .home__description {
		font-size: 14px;
		font-family: PingFangSC-Regular;
		color: #686b73;
		line-height: 20px;
		overflow: hidden;
		text-emphasis: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		margin: 0 0 20px;
	}

	.tags {
		display: flex;
		align-items: center;
	}

	.tags .tag {
		margin-right: 8px;
		padding: 3px;
		border: 1px solid #ccc;
		color: #999;
		font-size: 14px;
	}

	.shop {
		background: #eee;
		padding: 0 20px;
		height: 40px;
		line-height: 40px;
	}




.el-button2 {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		line-height: 1;
		height: 32px;
		white-space: nowrap;
		cursor: pointer;
		color: #000000;
		text-align: center;
		box-sizing: border-box;
		outline: 0;
		transition: .1s;
		background-color: transparent;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		vertical-align: middle;
		-webkit-appearance: none;
		padding: 8px 15px;
		
		
	}
.el-button2:hover {
	    background-color: transparent;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		line-height: 1;
		height: 32px;
		white-space: nowrap;
		cursor: pointer;
		color: #00aaff;
		text-align: center;
		box-sizing: border-box;
		outline: 0;
		transition: .1s;	
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		vertical-align: middle;
		-webkit-appearance: none;	
		padding: 8px 15px;	
		
	}
	.list-inline>li {
		display: inline-block;
		padding-left: 1%;
		/* Optional: for spacing between list items */
		width: 32%;
	}

	/*分页*/
	.page-box {
		display: flex;

		justify-content: flex-end;
		margin-top: 10px;
		float: right;
		width: 1280px;
	}

	/*排序*/
	.zq-drop-list {
		display: inline-block;
		min-width: 100px;
		position: relative;

		span {
			display: block;
			height: 30px;
			line-height: 30px;
			background: #f1f1f1;
			font-size: 14px;
			text-align: center;
			color: #333333;
			border-radius: 4px;

			i {
				background: url(https://www.easyicon.net/api/resizeApi.php?id=1189852&size=16) no-repeat center center;
				margin-left: 6px;
				display: inline-block;
			}

			li:hover {
				color: #ffffff;
				background: #0055ff;
			}
		}

		ul {
			position: absolute;
			z-index: 9999999;
			top: 30px;
			left: 0;
			width: 100%;
			margin: 0;
			padding: 0;
			border: solid 1px #f1f1f1;
			border-radius: 4px;
			overflow: hidden;

			li {
				list-style: none;
				height: 30px;
				line-height: 30px;
				font-size: 14px;
				border-bottom: solid 1px #f1f1f1;
				background: #ffffff;
				text-align: center;
			}

			li:last-child {
				border-bottom: none;
			}

			li:hover {
				background: #f6f6f6;
				color: #ff0000;
			}
		}
	}

	/*搜索*/
	.el-input__inner {
		border: none !important;
		box-shadow: none !important;
	}
</style>
